<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>菜品详情</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <style>
    /* 基本样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    body {
      background-color: #f4f4f4;
      color: #333;
      line-height: 1.6;
    }

    header {
      background-color: #f2c57f;
      padding: 20px 0;
      text-align: center;
    }

    header .logo h1 {
      font-size: 36px;
      color: #fff;
      font-weight: bold;
    }

    main {
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }

    .dish-detail {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .dish-image {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .dish-info {
      padding: 25px;
    }

    .dish-info h2 {
      font-size: 30px;
      color: #333;
      margin-bottom: 15px;
    }

    .dish-info .price {
      font-size: 24px;
      color: #e74c3c;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .dish-info .description {
      font-size: 16px;
      color: #666;
      margin-bottom: 30px;
    }

    .order-button {
      background-color: #e74c3c;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 18px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .order-button:hover {
      background-color: #c0392b;
    }

    .loading {
      display: none;
      margin-top: 20px;
      font-size: 16px;
      color: #666;
    }

    footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      margin-top: 40px;
    }
  </style>
</head>
<body>
<header>
  <div class="logo">
    <h1>美味餐点</h1>
  </div>
</header>


<main id="app">
  <div class="dish-detail">
    <img :src="dish.dishImg" alt="菜品图片" class="dish-image">
    <div class="dish-info">
      <h2>{{ dish.dishName }}</h2>
      <p class="price">¥ {{ dish.dishPrice }}</p>
      <p class="description">{{ dish.description || '暂无描述信息' }}</p>

      <button @click="placeOrder" class="order-button">下订单</button>
      <div class="loading" v-show="loading">正在处理订单...</div>
    </div>
  </div>
</main>

<footer>
  <p>&copy; 2025 美味餐点</p>
</footer>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      dish: {
        dishId: "",
        dishName: "",
        dishImg: "",
        dishPrice: "",
        description: ""
      },
      loading: false
    },
    mounted() {
      this.getById();
    },
    methods: {
      getById() {
        // 获取URL中的菜品ID
        const urlParams = new URLSearchParams(window.location.search);
        const id = urlParams.get("id");

        if (id) {
          // 调用后端API获取菜品详情
          axios.get(`dish/${id}`)
                  .then(response => {
                    if (response.data.code === 200) {
                      this.dish = response.data.data;
                    } else {
                      console.error("获取菜品失败:", response.data.message);
                      alert("获取菜品失败，请稍后重试");
                    }
                  })
                  .catch(error => {
                    console.error("请求错误:", error);
                    alert("网络错误，请稍后重试");
                  });
        } else {
          alert("未找到菜品ID");
        }
      },

      placeOrder() {
        // 显示加载状态
        this.loading = true;

        // 构建订单数据
        const orderData = {
          dishId: this.dish.dishId,
          custId: 1,// 默认用户ID为1
          dishName:this.dish.dishName,
          dishImg:this.dish.dishImg,
          dishPrice:this.dish.dishPrice
        };

        // 发送订单请求
        axios.post("order", orderData)
                .then(response => {
                  if (response.data.code === 200) {
                    alert("订单提交成功！");
                    // 跳转到订单列表页面，按照下订单时间降序排序
                    window.location.href = "order_list.html";
                  } else {
                    alert("订单提交失败: " + response.data.message);
                  }
                })
                .catch(error => {
                  console.error("订单请求错误:", error);
                  alert("网络错误，请稍后重试");
                })
                .finally(() => {
                  // 隐藏加载状态
                  this.loading = false;
                });
      }
    }
  });
</script>
</body>
</html>